<template>
  <div class="order-list">
    <el-card shadow="never" class="list-container">
      <template #header>
        <div class="list-header">
          <h3>订单列表</h3>
          <div class="header-actions">
            <el-button size="small" @click="$emit('refresh')">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
          </div>
        </div>
      </template>

      <el-table
        v-loading="loading"
        :data="orders"
        style="width: 100%"
        @row-click="handleRowClick"
        row-class-name="order-row"
      >
        <el-table-column prop="orderNumber" label="订单号" min-width="160">
          <template #default="{ row }">
            <div class="order-number">
              <el-text type="primary" class="number-text">{{ row.orderNumber }}</el-text>
              <el-tag 
                :type="getStatusType(row.status)" 
                size="small"
                effect="dark"
              >
                {{ row.statusText }}
              </el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="发件信息" min-width="200">
          <template #default="{ row }">
            <div class="sender-info">
              <div class="name">{{ row.senderName }}</div>
              <div class="contact">{{ row.senderPhone }}</div>
              <div class="address">{{ row.senderAddress }}</div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="收件信息" min-width="200">
          <template #default="{ row }">
            <div class="recipient-info">
              <div class="name">{{ row.recipientName }}</div>
              <div class="contact">{{ row.recipientPhone }}</div>
              <div class="address">{{ row.recipientAddress }}</div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="配送员" width="100">
          <template #default="{ row }">
            <div class="courier-info">
              <el-text v-if="row.courierName">{{ row.courierName }}</el-text>
              <el-text v-else type="info">未分配</el-text>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="时间信息" width="160">
          <template #default="{ row }">
            <div class="time-info">
              <div class="create-time">
                <el-text size="small" type="info">创建：</el-text>
                <el-text size="small">{{ formatTime(row.createTime) }}</el-text>
              </div>
              <div class="update-time">
                <el-text size="small" type="info">更新：</el-text>
                <el-text size="small">{{ formatTime(row.updateTime) }}</el-text>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button 
                type="primary" 
                size="small" 
                @click.stop="handleManageTrack(row)"
              >
                <el-icon><Location /></el-icon>
                管理轨迹
              </el-button>
              
        
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 空状态 -->
      <el-empty v-if="!loading && orders.length === 0" description="暂无订单数据">
        <el-button type="primary" @click="$emit('refresh')">刷新数据</el-button>
      </el-empty>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { Refresh, Location, Edit, ArrowDown } from '@element-plus/icons-vue'

interface Order {
  id: string
  orderNumber: string
  senderName: string
  senderPhone: string
  senderAddress: string
  recipientName: string
  recipientPhone: string
  recipientAddress: string
  status: number
  statusText: string
  createTime: string
  updateTime: string
  courierName?: string
  estimatedDelivery?: string
}

interface Props {
  orders: Order[]
  loading: boolean
}

interface Emits {
  (e: 'selectOrder', order: Order): void
  (e: 'updateStatus', orderId: string, status: number): void
  (e: 'refresh'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const getStatusType = (status: number): 'success' | 'warning' | 'danger' | 'info' | 'primary' => {
  const statusTypeMap: Record<number, 'success' | 'warning' | 'danger' | 'info' | 'primary'> = {
    0: 'warning',  // 待发货
    1: 'primary',  // 运输中
    2: 'info',     // 已送达
    3: 'success'   // 已签收
  }
  return statusTypeMap[status] || 'info'
}

const formatTime = (timestamp: string): string => {
  const date = new Date(timestamp)
  return date.toLocaleDateString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const handleRowClick = (row: Order) => {
  handleManageTrack(row)
}

const handleManageTrack = (order: Order) => {
  emit('selectOrder', order)
}

const handleUpdateStatus = (orderId: string, status: number) => {
  emit('updateStatus', orderId, status)
}
</script>

<style scoped>
.order-list {
  margin-bottom: 24px;
}

.list-container {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list-header h3 {
  margin: 0;
  color: #1e293b;
  font-size: 16px;
  font-weight: 600;
}

.header-actions {
  display: flex;
  gap: 8px;
}

:deep(.order-row) {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

:deep(.order-row:hover) {
  background-color: #f8fafc;
}

.order-number {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.number-text {
  font-weight: 500;
  font-family: 'Courier New', monospace;
}

.sender-info,
.recipient-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.name {
  font-weight: 500;
  color: #1e293b;
}

.contact {
  font-size: 12px;
  color: #64748b;
  font-family: 'Courier New', monospace;
}

.address {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

.courier-info {
  text-align: center;
}

.time-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.create-time,
.update-time {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (max-width: 768px) {
  .action-buttons {
    flex-direction: row;
    justify-content: center;
  }
  
  .action-buttons .el-button {
    padding: 6px 8px;
    font-size: 12px;
  }
}
</style> 